<template>
    <div class="q">
        <div class="w">
            <span>14:44</span>
        </div>
        <div class="e">
            <h1>购物车</h1>
            <span>我常买</span>
            <p>管理</p>
        </div>
        <div class="r">
            <div class="t">
                <img src="../images/05.png" alt="">
            </div>
            <div class="y">
                <span>购物车为空</span>
            </div>
            <div class="u">
                <span>'空既是饿，饿即是空'</span>
            </div>
            <div class="i">
                <input type="text" name="" id="" placeholder="去逛逛">
            </div>
        </div>
        <div class="a">
            <div class="s">
                <span>推荐.</span><p>RECOMMMEND</p>
            </div>
            <div class="v">
                <ul>
                    <li>
                        <img src="../images/06.png" alt="">
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="../images/07.png" alt="">
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="../images/06.png" alt="">
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="../images/07.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

</script>

<style lang="scss" scoped>
.q {

    // display: flex;
    .w {
        display: flex;
        width: 100%;
        height: 50px;
        background-color: rgb(251, 252, 252);
        justify-content: space-around;

        span {
            font-size: 20px;
        }
    }

    .e {
        display: flex;
        height: 90px;
        background-color: rgba(251, 250, 246, 0.803);

        h1 {
            font-size: 40px;
            color: rgb(12, 103, 239);
        }

        span {
            font-size: 40px;
            margin-left: 40px;
        }

        p {
            font-size: 40px;
            margin-left: 340px;
        }
    }

    .r {

        height: 420px;
        justify-content: center;
        background-color: rgb(250, 252, 252);

        .t {
            display: flex;
            height: 250px;

            img {
                margin-left: 220px;
                height: 200px;
            }
        }

        .y {
            display: flex;
            height: 60px;
            background-color: rgb(251, 249, 248);
            justify-content: center;
            span {
                display: flex;
            }
        }
    }
    .u{
        display: flex;
        height: 40px;
        justify-content: center;
        background-color: rgb(252, 254, 254);
        span{
            display: flex;
            font-size: 20px;
            color: rgb(167, 162, 162);
        }

    }
    .i{
        display: flex;
        height: 100px;
        justify-content: center;
        background-color: rgb(247, 250, 250);
        input{
            text-align: center;
            width: 100px;
            height: 40px;
            border-radius: 50px;
           border: 1px solid gray ;
        }
    }
   .a{
    // display: flex;
    height: 1000px;
    .s{
        display: flex;
        justify-content: center;
        line-height: 80px;
        width: 100%;
        height:80px;
        background-color: rgb(251, 245, 245);
        span{
            font-size: 30px;
        }
        p{
            font-size: 30px;
            color: rgb(7, 164, 242);
        }
    }
    .v{
        width: 100%;
    display: flex;
    // height: 920px;
    flex-wrap: wrap;
    // background-color: coral;
   }
   img{
    width: 300px;
    margin: 30px;
   }
   }
   
  

}
</style>